import React, { useMemo } from 'react';
import PrintItem from './../PrintItem';

const App = (props) => {
  const { checkboxProps, formItemProps, initialValue } = props;

  const v = useMemo(() => {
    if (Array.isArray(initialValue) && (Array.isArray(checkboxProps?.dataSource))) {
      const arr = [];

      checkboxProps.dataSource.forEach(item => {
        if (initialValue.includes(item.value)) {
          arr.push(item.label);
        }
      });

      // 勾选等宽，默认渲染每条一行
      if (checkboxProps.optionWidthFlag && arr.length) return arr;

      return arr.join(' ');
    }
    return '';
  }, [checkboxProps, initialValue]);

  return (
    <PrintItem
      style={formItemProps?.style || {}}
      label={localStorage.i18nextLng === 'en' ? formItemProps?.labelEn : formItemProps?.label}>
      {Array.isArray(v) ? (
        v.map((item, index) => (
          <div key={index}>{item}</div>
        ))
      ) : v}
    </PrintItem>
  );
};

export default App;